
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	  xmlns:th="http://www.thymeleaf.org" lang="zh">

<head>
	<link rel="StyleSheet" href="../../static/css/jpetstore.css" type="text/css"
		  media="screen" />

	<meta name="generator"
		  content="HTML Tidy for Linux/x86 (vers 1st November 2002), see www.w3.org" />
	<title>JPetStore Demo</title>
	<meta content="text/html; charset=windows-1252"
		  http-equiv="Content-Type" />
	<meta http-equiv="Cache-Control" content="max-age=0" />
	<meta http-equiv="Cache-Control" content="no-cache" />
	<meta http-equiv="expires" content="0" />
	<meta http-equiv="Expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
	<meta http-equiv="Pragma" content="no-cache" />
	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

</head>

<body>

<div th:include="~{common/commonSide::topbar}"></div>
<div id="Content">
	<div id="BackLink">
		<a href="/catalog/main">Return to Main Menu</a>
	</div>
	<div id="Catalog">
		<div id="Cart">
			<h2>Shopping Cart</h2>

			<table align="center">
				<tr>
					<th><b>Item ID</b></th>
					<th><b>Quantity</b></th>
					<th>&nbsp;</th>
				</tr>

				<tr th:if = "${has} eq 0">
					<td colspan="8"><b>Your cart is empty.</b></td>
				</tr>
				<div th:each="item:${shopCart}">
					<tr>
						<td th:text="${item.itemId}">itemId</td>
						<td th:text="${item.quantity}">quantity</td>
						<td>
							<label th:item="${item.itemId}" onclick="deleteItem(this.getAttribute('item'))">
								<button>delete</button>
							</label>
						</td>
					</tr>
				</div>
				<tr>
					<td colspan="10" th:text="'Sub Total: '+ ${#numbers.formatDecimal(money,1,'COMMA',2,'POINT')}">
					</td>

				</tr>
				<tr>
					<td colspan="10" style="text-align: center;align-items: center">
						<label>
							<input name="Submitbutton" onclick="submitItem()" type="submit" value="Submit Cart"/>
						</label>
					</td>
				</tr>
			</table>

		</div>
		<script type="text/javascript" >
			function deleteItem(item){
				$.ajax({
					type: 'post',
					url: '/viewCart/update',
					data: JSON.stringify(item),
					contentType: 'application/json;charset=utf-8',
					dataType: 'json',
					success: function (res) {
						console.log(res)
						window.location = '/viewCart'
					}
				})
			}
			function submitItem(){
				window.location="/viewCart/submit"
			}
		</script>
	</div>

	<div id="Separator">&nbsp;</div>
</div>
<div th:include="~{common/commonSide::footer}"></div>

</body>
</html>





